
const id = location.search.split("=")[1];

// 方法一：获取所有商品数据，前端筛选（不推荐）
// 方法二：根据id请求后端接口，直接获取指定数据（后端筛选）（推荐）

ajax("http://localhost:3000/database/goodsBasic.json", res => {
    res = JSON.parse(res).msg;
    console.log(res);
    let i = 0;
    res.some((val, idx) => {
        i = idx;
        return val.GoodsID === id
    });
    
    // console.log(res[i].smlimg)
    function Tab() {
        this.id=id;
        this.li = document.querySelectorAll(".cont li");
        this.limg = document.querySelectorAll(".cont li img");
        this.sImg = document.querySelector(".small_box img");
        this.bImg = document.querySelector(".big_box img");
        this.gName = document.querySelector(".magnifying-details-top>h1");
        this.gPrice = document.querySelector(".gPrice");
        this.gID = document.querySelector(".gID");
        this.gForm = document.querySelector(".gForm");
        this.gBrand = document.querySelector(".gBrand");
        this.Carts=document.querySelector("#Carts");
        this.data = res[i].smlimg;
        this.index = 0;
        this.addEvent();
    }
    Tab.prototype.addEvent = function () {
        const that = this;
        this.render();
        this.Carts.onclick=function(){
            that.carts();
        }
        this.sImg.src = this.data[0];
        for (let i = 0; i < this.li.length; i++) {
            this.limg[i].src=this.data[i];
            this.li[i].xuhao = i;
            this.li[i].onclick = function () {
                that.hide();
                that.getIndex(this);
            }
        }
    }
    Tab.prototype.carts=function(){  
            const goods = localStorage.getItem("goodsList") ? JSON.parse(localStorage.getItem("goodsList")) : [];
            if (goods.length < 1) {
                goods.push({
                    id: this.id,
                    num: 1
                })
            } else {
                let i = 0;
                const flag = goods.some((val, idx) => {
                    i = idx;
                    return val.id === this.id
                })
                if (flag) {
                    goods[i].num++;
                } else {
                    goods.push({
                        id: this.id,
                        num: 1
                    })
                }
            }
            localStorage.setItem("goodsList", JSON.stringify(goods))
    }
    Tab.prototype.render=function(){
        console.log(this.gName)
        this.gName.innerHTML=res[i].GoodsName;
        this.gPrice.innerHTML=res[i].GoodsPrice;
        this.gID.innerHTML=res[i].GoodsID;
        this.gForm.innerHTML=res[i].title;
        this.gBrand.innerHTML=res[i].GoodsBrand;
        
    }
    Tab.prototype.hide = function () {
        this.li[this.index].className = "";
    }
    Tab.prototype.getIndex = function (now) {
        this.index = now.xuhao;
        this.show();
    }
    Tab.prototype.show = function () {
        this.li[this.index].className = "active";
        this.sImg.src = this.data[this.index];
        console.log(this.sImg)
        this.bImg.src = this.data[this.index];
    }
    new Tab();
    // 放大镜功能
    class Magnifier {
        constructor() {
            this.sBox = document.querySelector(".small_box");
            this.sSpan = document.querySelector(".small_box span");
            this.bBox = document.querySelector(".big_box");
            this.bImg = document.querySelector(".big_box img");
            this.addEvent();
        }
        move(ops) {
            let l = ops.x - this.sSpan.offsetWidth / 2;
            let t = ops.y - this.sSpan.offsetHeight / 2;
            if (l < 0) l = 0;
            if (t < 0) t = 0;
            if (l > this.sBox.offsetWidth - this.sSpan.offsetWidth) {
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if (t > this.sBox.offsetHeight - this.sSpan.offsetHeight) {
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
            this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
        }
        init() {
            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
        }
        addEvent() {
            const that = this;
            this.sBox.onmouseenter = function () {
                that.show();
            }
            this.sBox.onmouseleave = function () {
                that.hide();
            }
            this.sBox.onmousemove = function (eve) {
                const e = eve || window.event;
                const pos = {
                    x: e.offsetX,
                    y: e.offsetY
                };
                that.move(pos);
            }
        }
        show() {
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
            this.init();
        }
        hide() {
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }
    new Magnifier();
})

function ajax(url, callback, data){
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`
    }
    url += "?" + str;
    const xhr = new XMLHttpRequest();
    xhr.open("get",url)
    xhr.onload = function(){
        if(xhr.status === 200){
            callback(xhr.responseText)
        }
    }
    xhr.send();
}
